<template>
  <div class="news-search">
    <div class="search-bar">
      <div class="search-input">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词搜索..."
          clearable
          @keyup.enter="handleKeyEnter"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleClickSearch" class="search-btn">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
      <div class="category-select">
        <el-select
          v-model="selectedCategory"
          placeholder="全部分类"
          clearable
          @change="handleCategoryChange"
        >
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getCategories } from '@/api/news'

const emit = defineEmits(['search', 'category-change'])

const searchKeyword = ref('')
const selectedCategory = ref('')
const categories = ref([])

// 获取分类列表
const fetchCategories = async () => {
  try {
    const { data } = await getCategories()
    categories.value = [
      { label: '全部分类', value: '' },
      ...data.map(category => ({
        label: category.name,
        value: category.id
      }))
    ]
  } catch (error) {
    console.error('获取分类列表失败:', error)
  }
}

onMounted(() => {
  fetchCategories()
})

// 统一的搜索处理函数
const doSearch = () => {
  // 确保搜索关键词经过处理
  const keyword = searchKeyword.value ? searchKeyword.value.trim() : ''
  emit('search', keyword)
}

// 处理回车键搜索
const handleKeyEnter = (event) => {
  // 阻止默认的回车行为
  event.preventDefault()
  doSearch()
}

// 处理点击搜索按钮
const handleClickSearch = () => {
  doSearch()
}

// 处理分类变化
const handleCategoryChange = () => {
  // 如果选择全部分类，清空搜索关键词
  if (!selectedCategory.value) {
    searchKeyword.value = ''
  }
  emit('category-change', selectedCategory.value)
}

// 只在清空输入框时重置搜索
watch(searchKeyword, (newVal) => {
  if (newVal === '') {
    doSearch()
  }
})

// 监听分类变化
watch(selectedCategory, (newVal) => {
  // 如果选择全部分类，清空搜索关键词并重新搜索
  if (!newVal) {
    searchKeyword.value = ''
    doSearch()
  }
  emit('category-change', newVal)
})
</script>

<style lang="scss" scoped>
.news-search {
  .search-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    
    .search-input {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      
      :deep(.el-input) {
        .el-input__wrapper {
          background-color: #f5f7fa;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #c0c4cc;
          }
          
          &.is-focus {
            background-color: #fff;
            border-color: var(--el-color-primary);
            box-shadow: 0 0 0 1px var(--el-color-primary-light-2);
          }
        }
        
        .el-input__inner {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
        
        .el-input__prefix {
          color: #909399;
        }
      }
      
      .search-btn {
        height: 40px;
        padding: 0 20px;
        font-size: 14px;
        border-radius: 4px;
        
        .el-icon {
          margin-right: 4px;
        }
      }
    }
    
    .category-select {
      width: 140px;
      
      :deep(.el-select) {
        width: 100%;
        
        .el-input__wrapper {
          background-color: #f5f7fa;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #c0c4cc;
          }
          
          &.is-focus {
            background-color: #fff;
            border-color: var(--el-color-primary);
            box-shadow: 0 0 0 1px var(--el-color-primary-light-2);
          }
        }
        
        .el-input__inner {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .search-bar {
      flex-direction: column;
      padding: 15px;
      
      .search-input {
        width: 100%;
      }
      
      .category-select {
        width: 100%;
      }
    }
  }
}
</style> 